<!-- 箱包申请列表 -->
<template>
    <!-- #ifdef H5 -->
    <uni-nav-bar title="任务清单" :statusBar="true" fixed :border="false" leftIcon="left"
                 backgroundColor="#4BA9FB" color="#FFFFFF" @clickLeft="commonUtils.finish">
    </uni-nav-bar>

    <!-- 顶部内容 -->
    <u-sticky>
        <view class="topContent">
            <!-- 日期选择 -->
            <view class="dateContent" @click="isShowDatePicker = true">
                <image class="dateIcon" src="@/static/images/date_icon.png" mode="scaleToFill"/>
                <view class="dateTxt">{{ selectDate }}</view>
            </view>

            <!-- 箱包申请按钮 -->
            <view class="btnApply" @click="onPackageClick"> 申请箱包</view>
        </view>
    </u-sticky>
    <!-- #endif -->

    <!-- #ifndef H5 -->
    <u-sticky>
        <uni-nav-bar title="任务清单" :statusBar="true" fixed :border="false" leftIcon="left"
                     backgroundColor="#4BA9FB" color="#FFFFFF" @clickLeft="commonUtils.finish">
        </uni-nav-bar>

        <!-- 顶部内容 -->
        <view class="topContent">
            <!-- 日期选择 -->
            <view class="dateContent" @click="isShowDatePicker = true">
                <image class="dateIcon" src="@/static/images/date_icon.png" mode="scaleToFill"/>
                <view class="dateTxt">{{ selectDate }}</view>
            </view>

            <!-- 箱包申请按钮 -->
            <view class="btnApply" @click="onPackageClick"> 申请箱包</view>
        </view>
    </u-sticky>
    <!-- #endif -->

    <!-- 箱包申请列表 -->
    <view class="applyList">
        <view class="applyItem" v-for="(item,index) in taskList" :key="index" @click="onItemClick(item)">
            <view class="itemContent">
                <view class="boxStatus">
                    <view>任务状态：</view>
                    <view :class="item.prepareStatus === '0' ? 'red' : 'green'">
                        {{ item.prepareStatus === '0' ? '未备箱' : '已备箱' }}
                    </view>
                </view>
                <view class="applyDate">申请日期：{{ item.applyDay }}</view>
            </view>
            <image class="arrowRight" :src="Url.FILE_HOST+'/static/i_arrow_right.png'" mode="aspectFit"></image>
        </view>
    </view>

    <!--加载更多提示-->
    <view class="loadmore" v-if="taskList.length>0">
        <u-loadmore :status="loadmoreStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
                    :nomore-text="nomoreText" line>
        </u-loadmore>
    </view>
    <view class="nodata" v-else>没有更多数据</view>

    <!-- 日期选择器 -->
    <u-datetime-picker ref="datetimePickerRef" :show="isShowDatePicker" v-model="datePickerDateTime" mode="year-month"
                       :formatter="formatter" @cancel="isShowDatePicker = false" @confirm="onDateConfirm">
    </u-datetime-picker>
</template>

<script setup>
import {ref} from "vue";
import {onShow, onReady, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {myStore} from "@/stores";
import dayjs from "dayjs";
import * as Url from "@/net/Url";
import * as Constants from "@/common/Constants";
import {getTaskListRequest} from "@/net/Api";
import ta from "dayjs/esm/locale/ta";
import commonUtils from "@/utils/commonUtils";

const store = myStore()
const datePickerDateTime = ref(Date.now())
const selectDate = ref(dayjs(Date.now()).format("YYYY-MM"))
const isShowDatePicker = ref(false)
const datetimePickerRef = ref(null)
const pageNo = ref(1)
const taskList = ref([])
const isResetData = ref(false)
const count = ref(0)
const loadmoreStatus = ref('loadmore')// loadmore / loading / nomore
const loadingText = ref('正在加载')
const loadmoreText = ref('加载更多')
const nomoreText = ref('没有更多了')

computed(() => {
    return {
        Url
    }
})

onShow(() => {
    isResetData.value = true
    initData()
})

onReady(() => {
    // 微信小程序需要用此写法
    datetimePickerRef.value.setFormatter(formatter);
})

/**
 * 初始化数据
 */
const initData = () => {
    pageNo.value = 1
    loadmoreStatus.value = 'loadmore'
    getApplyListRequest()
}

/**
 * 日期格式化
 */
const formatter = (type, value) => {
    if (type === 'year') {
        return `${value}年`;
    }
    if (type === 'month') {
        return `${value}月`;
    }
    return value;
}

/**
 * 日期选择器确认事件
 */
const onDateConfirm = (e) => {
    isShowDatePicker.value = false
    datePickerDateTime.value = e.value
    selectDate.value = dayjs(e.value).format("YYYY-MM")
    getApplyListRequest()
}

/**
 * 申请箱包
 */
const onPackageClick = () => {
    uni.navigateTo({
        url: '/pages/boxApply/boxApply?pageType=0'
    })
}

/**
 * 箱包申请列表点击事件
 */
const onItemClick = (item) => {
    uni.navigateTo({
        url: '/pages/boxApply/boxApply?pageType=1&itemData=' + encodeURIComponent(JSON.stringify(item))
    })
}

/**
 * 下拉刷新
 */
onPullDownRefresh(() => {
    isResetData.value = true
    setTimeout(() => {
        uni.stopPullDownRefresh();
    }, 1000);
    initData()
})

/**
 * 触底加载
 */
onReachBottom(() => {
    isResetData.value = false
    pageNo.value = pageNo.value + 1
    uni.stopPullDownRefresh();
    if (count.value === taskList.value.length)
        return
    getApplyListRequest()
})

/**
 * 处理加载状态
 */
const loadingStatus = () => {
    setTimeout(() => {
        if (count.value === taskList.value.length) {
            loadmoreStatus.value = 'nomore'
        } else if (count.value > taskList.value.length) {
            loadmoreStatus.value = 'loadmore'
        }
    }, 300)
}

/**
 * 箱包申请列表
 */
const getApplyListRequest = () => {
    let params = {
        pageNo: pageNo.value,
        pageSize: 10,
        applyDate: selectDate.value,
    }
    loadmoreStatus.value = 'loading'
    if (isResetData.value) {
        uni.showLoading()
    }
    getTaskListRequest(params).then((res) => {
        // 判断是否需要清空数据
        if (isResetData.value) {
            taskList.value = []
            setTimeout(() => {
                uni.hideLoading()
            }, 500)
        }
        // 设置数据
        taskList.value.push(...res.data.list)
        count.value = parseInt(res.data.count)

        loadingStatus()
    }).catch((err) => {
        loadmoreStatus.value = 'nomore'
        uni.hideLoading()
    })
}

</script>

<style scoped lang="scss">

.topContent {
    width: 100%;
    border-bottom: 1rpx solid #F1F1F1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #FFFFFF;
}

.dateContent {
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    border: 1rpx solid #DDDDDD;
    box-sizing: border-box;
    padding: 10rpx 50rpx;
    margin-left: 10rpx;
}

.dateIcon {
    width: 60rpx;
    height: 60rpx;
}

.dateTxt {
    font-size: 34rpx;
    color: #333333;
    margin-left: 10rpx;
}


.applyList {
    box-sizing: border-box;
    padding: 30rpx;
}

.applyItem {
    background-color: #FFFFFF;
    margin-bottom: 30rpx;
    border-radius: 15rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.itemContent {
    display: flex;
    flex-direction: column;
}

.boxStatus {
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 34rpx;
    margin-bottom: 10rpx;
}

.red {
    color: $uni-color-error;
}

.green {
    color: $uni-color-success;
}

.applyDate {
    color: #999999;
    font-size: 32rpx;
}

.btnApply {
    color: #FFFFFF;
    font-size: 32rpx;
    background-color: $themeColor;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
}

.arrowRight {
    width: 32rpx;
    height: 32rpx;
}

.loadmore {
    width: 100%;
}

.nodata {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30rpx;
    color: #999999;
    letter-spacing: 1rpx;
}
</style>